<template>
  <div class="box" ref="charts"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
let charts = ref();
let mycharts;
const getOption = () => {
  return {
    xAxis: {
      type: "category",
      show: false,
      boundaryGap: false,
    },
    yAxis: {
      show: false,
    },
    series: {
      type: "line",
      data: props.data,
      smooth: true,
      areaStyle: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "red", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "blue", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    },
    //图形图像的布局
    grid:{
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      show: true, 
    }
  };
};

//初始化echarts实例
onMounted(() => {
  mycharts = echarts.init(charts.value);
  mycharts.setOption(getOption());
  //绑定浏览器窗口变化的事件
  //DOM0事件:如果有多个后者覆盖前者
  //DOM2事件:不存在覆盖问题
  window.addEventListener("resize", () => {
    mycharts.resize();
  });
});
let props = defineProps(["data"]);
watch(
  () => props.data,
  () => {
    mycharts.setOption(getOption());
  }
);
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #ccc;
}
</style>